<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-31 17:46:49
 * @LastEditTime: 2019-12-07 16:05:11
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style type="text/css">
        html,
        body,
        #app {
            height: auto;
            background: #fff;
        }

        .row {
            position: relative;

        }

        .v-selected {
            background: #ececec;
        }

        .time {
            line-height: 34px;
        }

        .row .img {
            width: 60px;
            height: 60px;
        }

        .row .img img {
            width: 100%;
            /* height: 100%; */
        }

        .row .remark {
            position: absolute;
            left: 70px;
            top: 0;
            right: 0;
            color: #9e9e9e;
        }

        .b-b {
            border-bottom: 1px solid #ebedf0;
        }

        .sort {
            display: inline-block;
            margin-right: 10px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: #cd1b21;
            color: #fff;
            border-radius: 10px;
        }

        .v {
            font-size: 13px;
            padding: 15px 15px 0 15px;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 0 5px rgb(200, 198, 198);
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div style="padding:10px;">
            <div class="v" v-for="(row,index) in visitList" :class="activeIndex == index?'v-selected':''"
                @click="selectRow(row,index)">
                <div><span class="sort">{{index + 1}}</span><b>拜访客户：{{row.ClientName}}</b></div>
                <div class="b-b">
                    <div class="time">签到时间：{{row.StartTime}}</div>
                    <!-- <div class="row">
                        <div class="img" v-show="row.PIC_Path1"><img :src="'http://' + row.PIC_Path1" /></div>
                        <div class="remark" :style="{left:row.PIC_Path1?'70px':0}">{{row.FRemarks1}}</div>
                    </div> -->
                </div>
                <div v-show="row.EndTime">
                    <div class="time">签退时间：{{row.EndTime}}</div>
                    <!-- <div class="row">
                        <div class="img" v-show="row.PIC_Path1"><img :src="'http://' + row.PIC_Path2" /></div>
                        <div class="remark" :style="{left:row.PIC_Path2?'70px':0}">{{row.FRemarks2}}</div>
                    </div> -->
                </div>
            </div>
            <div v-show="!visitList.length" style="padding: 20px 0;color:#9e9e9e;text-align:center;">暂无签到记录</div>
        </div>

    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();


        api.addEventListener({
            name: 'setVisitList'
        }, function (ret, err) {

            vm.visitList = ret.value.visitList;

        })

        var userInfo = FLD.getUserInfo();
        var visitList = api.pageParam.visitList;

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                activeIndex: 0,
                visitList: visitList
            },
            created: function () {
                var that = this;
            },
            methods: {
                selectRow(row, index) {
                    var that = this;
                    that.activeIndex = index;
                    api.sendEvent({
                        name: 'selectVisitRow',
                        extra: {
                            selectRow: row
                        }
                    });
                    api.openWin({
                        name: 'customerVisitListDetail',
                        url: 'customerVisitListDetail.html',
                        reload: true,
                        slidBackEnabled: false,
                        allowEdit: false,
                        pageParam: {
                            customerVisitListDetail: row
                        }
                    })
                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>